<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-qrcode</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="example/app.css">
  </head>
  <body>
    <div id="app">
      <div id="wrapper">
        <h1> Vue Qrcode Demo </h1>

        <ul class="lists">
          <li>
            <label>size(px)</label>
            <input type="number" v-model="size | toNumber">
          </li>
          <li>
            <label>bg-color</label>
            <input type="color" v-model="bgColor">
          </li>
          <li>
            <label>fg-color</label>
            <input type="color" v-model="fgColor">
          </li>
          <li>
            <label>val</label>
            <textarea rows="6" cols="80" v-model="val"></textarea>
          </li>
        </ul>
        
        <qrcode :val="val" :size="size" :bg-color="bgColor" :fg-color="fgColor" level="L"></qrcode>
      </div>
    </div>

    
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <!-- <script src="build/bundle.js"></script> -->
    <script src="dist/vue-qrcode.js"></script>
    <script src="example/app.js"></script>
  </body>
</html>